<template>
    <div class="upload_wrap">
        <div class="video_show" v-if="url.indexOf('mp4')>=0">
            <div class="control_box flex-row">
                <a-icon type="play-circle" class="icon" @click="isPreview = true" />
                <a-icon type="delete" class="icon" @click="removeFile"/>
            </div>
            <video class="video">
                <source :src="url" type="video/mp4" />
            </video>
        </div>
        <a-upload
            v-else
            list-type="picture-card"
            :max="1"
            :file-list="fileList"
            :accept="accept"
            :multiple="false"
            :disabled="disabled"
            :customRequest="downloadFilesCustomRequest"
            @preview="handlePreview"
            :remove="removeFile"
        >
            <div v-if="fileList.length < 1">
                <a-icon class="icon" :type="loading ? 'loading' : 'file-image'" />
                <div class="ant-upload-text">{{ text }}</div>
            </div>
            <!-- <img class="show_img" v-else :src="fileList[0].url" /> -->
        </a-upload>
        
        <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
            <img :alt="text" style="width: 100%" :src="previewImage" />
        </a-modal>
        <show-modal title="预览视频" v-if="isPreview" width="500px" @cancel="isPreview = false" :isSure="false">
            <video width="460" controls autoplay>
                <source :src="url" type="video/mp4" />
            </video>
        </show-modal>
    </div>
</template>
<script>
import { uploadFile } from '@/api/upload';
import { getFileSize } from '@/utils';

export default {
    name: 'UploadFile',
    props: {
        url: {
            type: String,
            default: () => []
        },
        disabled: {
            type: Boolean,
            default: false
        },
        text: {
            type: String,
            default: '选择图片'
        },
        type: {
            type: String,
            default: ''
        },
        accept: {
            type: String,
            default: 'image/png,image/gif,image/jpeg'
        }
    },
    data() {
        return {
            previewImage: '',
            previewVisible: false,
            loading: false,
            isPreview: false
        };
    },
    computed: {
        fileList() {
            let url = this.url;
            let fileList = [];
            if (url) {
                fileList.push({
                    uid: '1',
                    status: 'done',
                    name: 'albumb.png',
                    url: url
                });
            }
            return fileList;
        }
    },
    methods: {
        // 重写a-upload的文件上传处理方式
        downloadFilesCustomRequest(data) {
            this.loading = true;
            this.saveFile(data);
        },
        // 上传并保存文件
        async saveFile(data) {
            try {
                const formData = new FormData();
                formData.append('file', data.file);
                let res = await uploadFile(formData);
                let { data: imgUrl } = res;
                let file = null;
                let size = getFileSize(data.file.size);
                if (this.type) {
                    file = {
                        type: this.type,
                        url: imgUrl
                    };
                } else {
                    file = imgUrl;
                }
                this.$emit('upload', file, size);
            } finally {
                this.loading = false;
            }
        },
        //删除文件
        async removeFile() {
            this.$emit('delete', this.type);
        },
        handleCancel() {
            this.previewVisible = false;
        },
        async handlePreview(file) {
            this.previewImage = file.url;
            this.previewVisible = true;
        }
    }
};
</script>
<style lang="scss" scoped>
.video_show{
    position: relative;
    height: 120px;
    border: 1px dashed #d4d4d4;
    overflow: hidden;
    border-radius: 6px;
    .video{
        min-width: 100%;
        min-height: 100%;
        vertical-align: middle;
    }
    .control_box{
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        align-items: center;
        justify-content: center;
        background: rgba($color: #000000, $alpha: .2);
        z-index: 3;
        .icon{
            margin: 0 10px;
            font-size: 18px;
            color: rgba($color: #fff, $alpha: .8);
        }
    }
}
::v-deep .ant-upload.ant-upload-select-picture-card,
::v-deep .ant-upload-list-picture-card-container,
::v-deep .ant-upload-list-picture-card .ant-upload-list-item {
    width: 100%;
    height: 120px;
    margin-bottom: 0;
}
.icon {
    font-size: 20px;
    margin-bottom: 10px;
}
.tip {
    margin: 0;
    line-height: 0;
    font-size: 12px;
    color: #999;
}
.show_img {
    width: 100%;
    height: 80px;
}
</style>
